<script lang="ts" setup>
import { ref } from 'vue'

const list = ref([
  {
    path: 'https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg',
    title: '天猫新品',
    count: '热销',
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg',
    title: '今日爆款今日爆款今日爆款',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg',
    title: '天猫国际',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg',
    title: '飞猪旅行',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg',
    title: '天猫超市',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp',
    title: '冬奥公益',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg',
    title: '飞猪旅行',
    count: 99,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg',
    title: '天猫超市',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp',
    title: '冬奥公益',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg',
    title: '天猫新品',
    count: 6,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg',
    title: '今日爆款',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg',
    title: '天猫国际',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg',
    title: '飞猪旅行',
    count: 0,
  },
  {
    path: 'https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg',
    title: '天猫超市',
    count: 0,
  },
])
</script>

<template>
  <tm-app>
    <tm-sheet>
      <tm-text :font-size="32" label="横向滚动" />
      <tm-divider />
      <tm-text label="抹平了平台差异,适用于希望内容横向滚动的场景." />
      <tm-text
        label="使用时一定要注意scrollx的宽度和内部的宽度一定要设置,否则会失效,同时也要注意高度的设置,留出底部导航条的间距."
      />
    </tm-sheet>
    <tm-sheet :padding="[0, 0]" _class="overflow">
      <tm-scrollx :width="686" :height="300">
        <tm-grid :col="7" :width="1340">
          <tm-grid-item v-for="(item, index) in list" :key="index" :height="140" :count="item.count">
            <tm-image :width="110" :height="79" :src="item.path" />
            <view style="white-space: normal">
              <tm-text _class="text-overflow-1" :font-size="24" :label="item.title" />
            </view>
          </tm-grid-item>
        </tm-grid>
      </tm-scrollx>
    </tm-sheet>
    <tm-sheet :padding="[0, 0]" _class="overflow">
      <tm-scrollx align="between" :width="686" :height="300">
        <template #barll>
          <tm-text _class="pl-24" color="primary" :font-size="24" label="新闻关键词,营销信息" />
        </template>
        <tm-grid :col="7" :width="1340">
          <tm-grid-item v-for="(item, index) in list" :key="index" :height="140" :count="item.count">
            <tm-image :width="110" :height="79" :src="item.path" />
            <view style="white-space: normal">
              <tm-text _class="text-overflow-1" :font-size="24" :label="item.title" />
            </view>
          </tm-grid-item>
        </tm-grid>
      </tm-scrollx>
    </tm-sheet>
  </tm-app>
</template>
